<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4081946" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xf0fc;</span>
                <div class="name">装修</div>
                <div class="code-name">&amp;#xf0fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">装修</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">装修商家-床</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">装修商家-吊灯</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">装修商家-电视机</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">装修商家-地板</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">装修</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">装饰装修</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">首页-选中</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">男</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">查看回答</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">话题</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">热门</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">女</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">已点赞</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">已收藏</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">手提袋</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">slidebar_门禁</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe877;</span>
                <div class="name">24gl-bag</div>
                <div class="code-name">&amp;#xe877;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">购物袋</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">店铺装修</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">shoppingbag购物袋</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">门</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">购物袋</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">菜单</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">消息,提醒,铃铛_jurassic</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1685949600593'); /* IE9 */
  src: url('iconfont.eot?t=1685949600593#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1685949600593') format('woff'),
       url('iconfont.ttf?t=1685949600593') format('truetype'),
       url('iconfont.svg?t=1685949600593#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangxiu2"></span>
            <div class="name">
              装修
            </div>
            <div class="code-name">.icon-zhuangxiu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangxiu"></span>
            <div class="name">
              装修
            </div>
            <div class="code-name">.icon-zhuangxiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangxiushangjia-"></span>
            <div class="name">
              装修商家-床
            </div>
            <div class="code-name">.icon-zhuangxiushangjia-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangxiushangjia-1"></span>
            <div class="name">
              装修商家-吊灯
            </div>
            <div class="code-name">.icon-zhuangxiushangjia-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangxiushangjia-2"></span>
            <div class="name">
              装修商家-电视机
            </div>
            <div class="code-name">.icon-zhuangxiushangjia-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangxiushangjia-3"></span>
            <div class="name">
              装修商家-地板
            </div>
            <div class="code-name">.icon-zhuangxiushangjia-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangxiu1"></span>
            <div class="name">
              装修
            </div>
            <div class="code-name">.icon-zhuangxiu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangshizhuangxiu"></span>
            <div class="name">
              装饰装修
            </div>
            <div class="code-name">.icon-zhuangshizhuangxiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye2"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye-xuanzhong"></span>
            <div class="name">
              首页-选中
            </div>
            <div class="code-name">.icon-shouye-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nan"></span>
            <div class="name">
              男
            </div>
            <div class="code-name">.icon-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chakanhuida"></span>
            <div class="name">
              查看回答
            </div>
            <div class="code-name">.icon-chakanhuida
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huati"></span>
            <div class="name">
              话题
            </div>
            <div class="code-name">.icon-huati
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.icon-pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remen"></span>
            <div class="name">
              热门
            </div>
            <div class="code-name">.icon-remen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nv"></span>
            <div class="name">
              女
            </div>
            <div class="code-name">.icon-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yidianzan"></span>
            <div class="name">
              已点赞
            </div>
            <div class="code-name">.icon-yidianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yishoucang"></span>
            <div class="name">
              已收藏
            </div>
            <div class="code-name">.icon-yishoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye1"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban-"></span>
            <div class="name">
              手提袋
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-slidebar_menjin"></span>
            <div class="name">
              slidebar_门禁
            </div>
            <div class="code-name">.icon-slidebar_menjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-24gl-bag"></span>
            <div class="name">
              24gl-bag
            </div>
            <div class="code-name">.icon-24gl-bag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwudai"></span>
            <div class="name">
              购物袋
            </div>
            <div class="code-name">.icon-gouwudai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianpuzhuangxiu"></span>
            <div class="name">
              店铺装修
            </div>
            <div class="code-name">.icon-dianpuzhuangxiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoppingbaggouwudai"></span>
            <div class="name">
              shoppingbag购物袋
            </div>
            <div class="code-name">.icon-shoppingbaggouwudai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-door-line"></span>
            <div class="name">
              门
            </div>
            <div class="code-name">.icon-door-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwudai1"></span>
            <div class="name">
              购物袋
            </div>
            <div class="code-name">.icon-gouwudai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidan"></span>
            <div class="name">
              菜单
            </div>
            <div class="code-name">.icon-caidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo3"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jurassic_info"></span>
            <div class="name">
              消息,提醒,铃铛_jurassic
            </div>
            <div class="code-name">.icon-jurassic_info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangxiu2"></use>
                </svg>
                <div class="name">装修</div>
                <div class="code-name">#icon-zhuangxiu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangxiu"></use>
                </svg>
                <div class="name">装修</div>
                <div class="code-name">#icon-zhuangxiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangxiushangjia-"></use>
                </svg>
                <div class="name">装修商家-床</div>
                <div class="code-name">#icon-zhuangxiushangjia-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangxiushangjia-1"></use>
                </svg>
                <div class="name">装修商家-吊灯</div>
                <div class="code-name">#icon-zhuangxiushangjia-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangxiushangjia-2"></use>
                </svg>
                <div class="name">装修商家-电视机</div>
                <div class="code-name">#icon-zhuangxiushangjia-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangxiushangjia-3"></use>
                </svg>
                <div class="name">装修商家-地板</div>
                <div class="code-name">#icon-zhuangxiushangjia-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangxiu1"></use>
                </svg>
                <div class="name">装修</div>
                <div class="code-name">#icon-zhuangxiu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangshizhuangxiu"></use>
                </svg>
                <div class="name">装饰装修</div>
                <div class="code-name">#icon-zhuangshizhuangxiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye2"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye-xuanzhong"></use>
                </svg>
                <div class="name">首页-选中</div>
                <div class="code-name">#icon-shouye-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nan"></use>
                </svg>
                <div class="name">男</div>
                <div class="code-name">#icon-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chakanhuida"></use>
                </svg>
                <div class="name">查看回答</div>
                <div class="code-name">#icon-chakanhuida</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huati"></use>
                </svg>
                <div class="name">话题</div>
                <div class="code-name">#icon-huati</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#icon-pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remen"></use>
                </svg>
                <div class="name">热门</div>
                <div class="code-name">#icon-remen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nv"></use>
                </svg>
                <div class="name">女</div>
                <div class="code-name">#icon-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yidianzan"></use>
                </svg>
                <div class="name">已点赞</div>
                <div class="code-name">#icon-yidianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yishoucang"></use>
                </svg>
                <div class="name">已收藏</div>
                <div class="code-name">#icon-yishoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye1"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban-"></use>
                </svg>
                <div class="name">手提袋</div>
                <div class="code-name">#icon-tubiaozhizuomoban-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slidebar_menjin"></use>
                </svg>
                <div class="name">slidebar_门禁</div>
                <div class="code-name">#icon-slidebar_menjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-24gl-bag"></use>
                </svg>
                <div class="name">24gl-bag</div>
                <div class="code-name">#icon-24gl-bag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwudai"></use>
                </svg>
                <div class="name">购物袋</div>
                <div class="code-name">#icon-gouwudai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianpuzhuangxiu"></use>
                </svg>
                <div class="name">店铺装修</div>
                <div class="code-name">#icon-dianpuzhuangxiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoppingbaggouwudai"></use>
                </svg>
                <div class="name">shoppingbag购物袋</div>
                <div class="code-name">#icon-shoppingbaggouwudai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-door-line"></use>
                </svg>
                <div class="name">门</div>
                <div class="code-name">#icon-door-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwudai1"></use>
                </svg>
                <div class="name">购物袋</div>
                <div class="code-name">#icon-gouwudai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan"></use>
                </svg>
                <div class="name">菜单</div>
                <div class="code-name">#icon-caidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo3"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jurassic_info"></use>
                </svg>
                <div class="name">消息,提醒,铃铛_jurassic</div>
                <div class="code-name">#icon-jurassic_info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
